<template>
  <div>
    <Dropdown trigger="click" @on-click="selectLang" transfer>
      <a href="javascript:void(0)" style="color: #515a6e;">
        {{ title }}
        <Icon :size="12" type="ios-arrow-down" />
      </a>
      <DropdownMenu slot="list">
        <DropdownItem v-for="(value, key) in localList" :name="key" :key="`lang-${key}`">{{ value }}</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  </div>
</template>

<script>
export default {
  name: 'Language',
  props: {
    lang: String
  },
  data () {
    return {
      langList: {
        'zh-CN': '简体中文',
        // 'zh-TW': '繁体中文',
        'en-US': 'English'
      },
      localList: {
        'zh-CN': '简体中文',
        // 'zh-TW': '繁体中文',
        'en-US': 'English'
      }
    }
  },
  watch: {
    lang (lang) {
      this.$i18n.locale = lang
    }
  },
  computed: {
    title () {
      return this.langList[this.lang]
    }
  },
  methods: {
    selectLang (name) {
      // console.log(name)
      this.$emit('on-lang-change', name)
      this.$emit('on-click', name)
    }
  }
}
</script>
